<script setup lang="ts">
import { ref, reactive, watch, h, type VNode } from 'vue'
import {
  NSpace, NForm, NFormItem, NInput, NSelect, NDatePicker, NButton, NScrollbar,
  NModal, useMessage, NSpin, NIcon, NTooltip, type SelectOption, type FormInst
} from 'naive-ui'
import router from '@/router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import { ApprovalFilled } from '@vicons/material'
import VBackImg from '@/assets/images/back.png'
import { ErrorRound } from '@vicons/material'
import VUpload from '@/views/OA/Common/Upload.vue'
import { subDays } from 'date-fns'
import { cardNumberRegex } from '@/enums/regex'

const tags = useTagStore().tags
const props = defineProps({
  title: { type: String, default: () => '报销申请' },
  id: { type: String, default: () => null },
  flag: { type: [Number, String], default: () => null }
})
const message = useMessage()
const formValue = reactive<Record<string, any>>({
  draft: null, //草稿状态
  entityId: null, //流程实体id
  reimburseType: null, //报销类型 0差旅 1合同 2其他 3公出
  primitiveId: null, //关联报销id
  errandName: null,//出差人
  amount: null,//合计金额
  remark: null,//差旅事由
  accountName: null,
  openingBank: null,
  bankCardNumber: null,
  reimburseDetailList: [
    {
      id: 0,
      // 除差旅以外
      reimburseContent: null, //报销内容
      salary: null, //金额
      piece: null, //单据张数
      fileId: null, //附件
      // 差旅以外
      startTime: null, //起讫开始日期
      endTime: null, //起讫结束日期
      startAddress: null, //起讫开始地点
      endAddress: null, //起讫结束地点
      days: null, //天数
      vehicles: null, //交通工具
      vehiclesFee: null, //交通工具费用
      invoice: null, //住宿费的发票金额
      amount: null, //住宿费的金额
      boardExpenses: null, //伙食费
      sundryFee: null, //杂项费用
      others: null, //其他事项
      othersFee: null, //其他事项金额
      amountSum: null //合计金额
    }
  ]
})
const rules: any = ref({
  reimburseType: {
    required: true,
    message: '请选择报销类型',
    trigger: ['change', 'blur']
  },
  primitiveId: {
    required: true,
    trigger: ['change', 'select'],
    validator: (_: any, value: any) => {
      if (formValue.reimburseType != '3' && formValue.reimburseType != '5') {
        if (!value) return new Error('请选择关联')
        return true
      } else {
        if (!value?.length) return new Error('请选择关联')
        return true
      }
    }
  },
  cardType: {
    required: true,
    message: '请选择报销卡',
    trigger: ['change', 'select'],
  },
  accountName: {
    required: true,
    trigger: ['input', 'change', 'blur'],
    validator: (_: any, value: any) => {
      if (!value || value?.length === 0) return new Error('请输入开户名')
      // if (value && value.length > 10) return new Error('开户名 字数不得超过10')
      return true
    }
  },
  openingBank: {
    required: true,
    trigger: ['input', 'change', 'blur'],
    validator: (_: any, value: any) => {
      if (!value || value?.length === 0) return new Error('请输入开户行')
      // if (value?.length > 100) return new Error('开户行 字数不得超过100')
      return true
    }
  },
  bankCardNumber: {
    required: true,
    trigger: ['input', 'change','blur'],
    validator: (_: any, value: any) => {
      if (value?.length === 0 || !value) return new Error('请输入银行卡号')
      // if(!cardNumberRegex.test(value)) {
      //   return new Error('银行卡格式有误，请重新输入')
      // }
      return true
    }
  }
})
const typeList = [
  {
    value: '3',
    label: '公出'
  },
  {
    value: '0',
    label: '差旅'
  },
  {
    value: '4',
    label: '接待'
  },
  {
    value: '1',
    label: '合同'
  },
  {
    value: '5',
    label: '劳务费'
  },
  {
    value: '2',
    label: '其他'
  }
]

const cardTypeList = [
  { value: "1", label: "我的公务卡" },
  { value: "2", label: "其他" }
]
/** 改变报销卡的类型 */
const changeCardType = async (v: string) => {
  if (v === "1") {
    const [error, res] = await sendRequest({
      module: 'user',
      api: 'getUserBankInfo',
      override: {
        params: {}
      }
    })
    if (error || res.code !== 0) {
      return false
    }
    const { accountName, bankCardNumber, integrityFlag, openingBank } = res.data
    if (!integrityFlag) {
      message.warning("无个人公务卡信息，请至个人信息页面维护公务卡信息或选择【其他】手动填写")
      formValue.cardType = null
      formValue.accountName = null
      formValue.bankCardNumber = null
      formValue.openingBank = null
    } else {
      formValue.accountName = accountName
      formValue.bankCardNumber = bankCardNumber
      formValue.openingBank = openingBank
    }
  } else {
    formValue.accountName = null
    formValue.bankCardNumber = null
    formValue.openingBank = null
  }
}

//只输入正整数
const onlyIntNumber = (value: string) => {
  return !value || /^\d+$/.test(value)
}
//只能输入数字
const onlyFloatNumber = (value: string) => {
  var regA = /^\d*\.{0,1}\d{0,2}$/
  const tmp: any = value.split('')
  if (tmp[0] == 0 && tmp[1] == 0) return false
  return !value || regA.test(value)
}
//去除空格
const stopNull = (value: string) => {
  return !value.startsWith(' ') && !value.endsWith(' ')
}
// render创建select
const renderOption = ({ node, option }: { node: VNode; option: SelectOption }) =>
  h(
    NTooltip,
    {
      placement: 'left'
    },
    {
      trigger: () => node,
      default: () => option.key
    }
  )
// 获取关联
const AboutList: any = ref()
const getAbout = async (val: any) => {
  const [error, res] = await sendRequest({
    module: 'account',
    api: 'droplist',
    override: {
      params: {
        reimburseType: val
      }
    }
  })
  if (error) return
  if (res.code !== 0) return
  AboutList.value = res.data
}
// 获取流程id
const hint = ref()
const spinShow = ref(false)
const workFlowList = ref(' ')
const getWorkFlow = async (val: any) => {
  spinShow.value = true
  const [error, res] = await sendRequest({
    module: 'receiveOrDispatch',
    api: 'workFlow',
    override: {
      params: {
        functionCode: val
      }
    }
  })
  if (error) return
  if (res.code !== 0) return
  formValue.entityId = res.data.entityId
  hint.value = res.data.remark
  workFlowList.value = res.data.workFlowList?.length
    ? res.data.workFlowList?.map((it: any) => it).join(' → ')
    : null
  spinShow.value = false
}
getWorkFlow('A0548')
// 添加报销明细
const openScope = () => {
  formValue.reimburseDetailList.push({
    id: formValue.reimburseDetailList.length,
    reimburseContent: null, //报销内容
    salary: null, //金额
    piece: null, //单据张数
    fileId: null, //附件
    // 差旅以外
    startTime: null, //起讫开始日期
    endTime: null, //起讫结束日期
    startAddress: null, //起讫开始地点
    endAddress: null, //起讫结束地点
    days: null, //天数
    vehicles: null, //交通工具
    vehiclesFee: null, //交通工具费用
    invoice: null, //住宿费的发票金额
    amount: null, //住宿费的金额
    boardExpenses: null, //伙食费
    sundryFee: null, //杂项费用
    others: null, //其他事项
    othersFee: null, //其他事项金额
    amountSum: null //合计金额
  })
}
// 删除填入访客
const deleteUser = (val: any) => {
  formValue.reimburseDetailList.splice(val, 1)
}
// 报销类型选择
const changeType = (val: any) => {
  getAbout(val)
  formValue.primitiveId = null
  formValue.errandName = null
  formValue.remark = null
  formRef.value?.restoreValidation()
  formValue.reimburseDetailList = [
    {
      id: 0,
      reimburseContent: null, //报销内容
      salary: null, //金额
      piece: null, //单据张数
      fileId: null, //附件
      // 差旅以外
      startTime: null, //起讫开始日期
      endTime: null, //起讫结束日期
      startAddress: null, //起讫开始地点
      endAddress: null, //起讫结束地点
      days: null, //天数
      vehicles: null, //交通工具
      vehiclesFee: null, //交通工具费用
      invoice: null, //住宿费的发票金额
      amount: null, //住宿费的金额
      boardExpenses: null, //伙食费
      sundryFee: null, //杂项费用
      others: null, //其他事项
      othersFee: null, //其他事项金额
      amountSum: null //合计金额
    }
  ]
  formValue.openingBank = null
  formValue.accountName = null
  formValue.bankCardNumber = null
}
// 附件
const contentVisible = ref(false)
// 确定
const formRef = ref<FormInst | null>(null)
const contentContent = ref()
const confirm = (status: number) => {
  contentContent.value = status ? '您确定要保存草稿吗？' : ' 您确定要提交申请吗？'
  formRef.value?.validate(async (err) => {
    if (err) return
    contentVisible.value = true
    formValue.draft = status
  })
}
// 报销内容
const renderContentMessage = (_: any, value: any) => {
  if (!value) return Error('请输入报销内容')
  if (value?.length > 100) return new Error('报销内容不得超过100字')
  return true
}
// 金额必填
const renderMoneyMessage = (_: any, value: any) => {
  if (!value) return Error('请输入金额')
  if (value?.toString().trim() === '0') return Error('金额不能为0')
  return true
}
// 金额非必填
const renderMoneyMessageNoMust = (_: any, value: any) => {
  if (value?.toString().trim() === '0') return Error('金额不能为0')
  return true
}
// 单据张数
const renderPieceMessage = (_: any, value: any) => {
  if (!value) return Error('请输入单据张数')
  return true
}
//总金额
const renderMoneyAll = (_: any, value: any) => {
  if (value == '0') return Error('总金额不能为0')
  if (!value) return true
  if (!/^\d{1,9}(\.\d{1,2})?$/.test(String(value))) return new Error('金额整数位不能超过9位，小数位不能超过2位')
  return true
}
// 提交
const loading = ref(false)
const submit = async () => {
  loading.value = true
  const tmp = JSON.parse(JSON.stringify(formValue))
  tmp.primitiveId = tmp.primitiveId?.join() || null
  if (props.id && !props.flag) {
    const [error, res] = await sendRequest({
      module: 'account',
      api: 'accountUpdate',
      override: {
        data: {
          ...tmp,
          id: props.id
        }
      }
    })
    if (error) return message.error(error.message), loading.value = false
    if (res.code !== 0) return message.error(res.msg), loading.value = false
    message.success(res.msg)
    goSubmit()
  } else {
    const [error, res] = await sendRequest({
      module: 'account',
      api: 'accountSave',
      override: {
        data: {
          ...tmp
        }
      }
    })
    if (error) return message.error(error.message), loading.value = false
    if (res.code !== 0) return message.error(res.msg), loading.value = false
    message.success(res.msg)
    goSubmit()
  }
  loading.value = false
  contentVisible.value = false
}
// 获取修改详情
const fileList: any = ref([])
const getInfo = async () => {
  const [error, res] = await sendRequest({
    module: 'account',
    api: 'accountItem',
    uri: {
      id: props.id
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  fileList.value = res.data.fileList
  formValue.amount = res.data.amount
  Object.keys(res.data).map((it: any) => {
    if (it === 'cardType') {
      formValue[it] = String(res.data[it]) // cardType  类型转换
    } else {
      // @ts-ignore
      formValue[it] = res.data[it]
    }
  })
  await getAbout(formValue.reimburseType)
  formValue.primitiveId = formValue.primitiveId.split(',')
}
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  tags.splice(index, 1)
  if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
// 提交完跳转我的提交
const goSubmit = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  tags.splice(index, 1)
  if (formValue.draft) return router.push({ path: '/OA/UserCenter/Drafts' })
  router.push({ path: '/OA/UserCenter/Submit' })
}
// 计算天数
function getDaysBetweenDates(date1: any, date2: any) {
  const oneDay = 24 * 60 * 60 * 1000
  if (date1 && date2) {
    const firstDate = new Date(date1)
    const secondDate = new Date(date2)
    const diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / oneDay)) + 1
    return diffDays + ''
  } else {
    return '0'
  }
}
// 选择关联
const changePrimitiveId = (val: any, info: any) => {
  formValue.primitiveId = val
  formValue.remark = info[0].remark
}

watch(
  () => formValue.reimburseDetailList,
  async () => {
    if (formValue.reimburseType == '0') {
      if (formValue.reimburseDetailList.some((item: any) => item.amountSum)) {
        formValue.amount = formValue.reimburseDetailList.reduce((total: any, curr: any) => {
          return Number(total) + Number(curr.amountSum)
        }, 0)
      } else formValue.amount = 0
    } else {
      if (formValue.reimburseDetailList.some((item: any) => item.salary)) {
        formValue.amount = formValue.reimburseDetailList.reduce((total: any, curr: any) => {
          return Number(total) + Number(curr.salary)
        }, 0)
      } else formValue.amount = 0
    }
  },
  { deep: true, immediate: true }
)

watch(
  () => formValue.reimburseType,
  async () => {
    await getAbout(formValue.reimburseType)
  }
)

watch(
  () => formValue.reimburseType && formValue.amount,
  async () => {
    if (['1', '2', '3', '4', '5'].includes(formValue.reimburseType)) {
      if (formValue.amount < 10000) {
        await getWorkFlow('A0548')
      } else if (formValue.amount < 300000 && formValue.amount >= 10000) {
        await getWorkFlow('A0549')
      } else await getWorkFlow('A0550')
    } else await getWorkFlow('A0548')
  }
)

watch(
  () => props.id,
  () => {
    if (props.title == '报销申请编辑' && props.id) getInfo()
  },
  { deep: true, immediate: true }
)

watch(
  () => formValue,
  () => {
    formValue.reimburseDetailList.forEach((cur: any) => {
      cur.amountSum = parseFloat(
        (
          Number(cur.vehiclesFee) +
          Number(cur.amount) +
          Number(cur.boardExpenses) +
          Number(cur.sundryFee) +
          Number(cur.othersFee)
        ).toFixed(2)
      )
      cur.days = getDaysBetweenDates(cur.startTime, cur.endTime)
    })
  },
  { deep: true, immediate: true }
)
</script>

<template>
  <div class="main">
    <div class="topTitle">{{ props.title }}</div>
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <div class="progressHint" v-if="hint">
              <NIcon size="20" class="iconStyle">
                <ErrorRound />
              </NIcon>
              <div style="white-space: pre-wrap" v-html="hint"></div>
            </div>
            <div class="progress">
              <div style="display: flex; margin-right: 10px">
                <NIcon :size="20" class="iconStyle">
                  <ApprovalFilled />
                </NIcon>
                <span>审批流程</span>
              </div>
              <span style="font-size: 18px; flex: 1" :style="{ color: !workFlowList ? 'red' : '#79bb92' }">
                {{ workFlowList ? workFlowList : '暂无配置流程，请联系管理员进行配置' }}
              </span>
            </div>

            <div class="content_cen">
              <NForm ref="formRef" require-mark-placement="left" label-placement="left" :rules="rules"
                :label-width="120" :model="formValue" style="width: 425px" label-align="right">
                <NSpace style="display: flex; flex-direction: column">
                  <NFormItem label="总金额(元):" path="amount" label-style="font-size: 20px;
                  font-weight: boldest;
                  height: 34px;
                  line-height: 34px;" :rule="{
                    key: 'amount',
                    trigger: ['change'],
                    validator: (_: any, value: any) => renderMoneyAll(_, value)
                  }">
                    <div class="valueStyle">{{ formValue.amount }}</div>
                  </NFormItem>
                  <NFormItem label="报销类型:" path="reimburseType">
                    <NSelect :options="typeList" placeholder="请选择报销类型" clearable class="commonWidthB"
                      v-model:value="formValue.reimburseType" :on-update-value="changeType" />
                  </NFormItem>
                  <NFormItem label="选择关联:" path="primitiveId" v-if="formValue.reimburseType != '2'">
                    <NSelect :options="AboutList" placeholder="请选择关联" clearable class="commonWidthB"
                      v-model:value="formValue.primitiveId" label-field="key" value-field="value"
                      :render-option="renderOption" multiple @update-value="changePrimitiveId" />
                  </NFormItem>
                  <NFormItem label="出差人:" path="errandName"
                    v-if="formValue.reimburseType == '3' || formValue.reimburseType == '0'">
                    <NInput placeholder="请输入出差人" :allow-input="stopNull" class="commonWidthB"
                      v-model:value="formValue.errandName" clearable />
                  </NFormItem>
                  <NFormItem label="事由:" path="remark" v-if="formValue.reimburseType == '0' && formValue.primitiveId">
                    <NInput placeholder="请输入事由" :allow-input="stopNull" class="commonWidthB"
                      v-model:value="formValue.remark" clearable type="textarea" />
                  </NFormItem>
                  <template v-if="formValue.reimburseType !== '5'">
                    <NFormItem label="选择报销卡:" path="cardType">
                      <NSelect :options="cardTypeList" placeholder="请选择报销卡" clearable class="commonWidthB"
                        v-model:value="formValue.cardType" label-field="label" value-field="value"
                        @update-value="changeCardType" />
                    </NFormItem>
                    <NFormItem label="开户行:" path="openingBank">
                      <NInput placeholder="请输入开户行" :allow-input="stopNull" class="commonWidthB"
                        v-model:value="formValue.openingBank" clearable :disabled="formValue.cardType === '1'" />
                    </NFormItem>
                    <NFormItem label="银行卡号:" path="bankCardNumber">
                      <NInput placeholder="请输入银行卡号" :allow-input="stopNull" class="commonWidthB"
                        v-model:value="formValue.bankCardNumber" clearable :disabled="formValue.cardType === '1'" />
                    </NFormItem>
                    <NFormItem label="开户名:" path="accountName">
                      <NInput placeholder="请输入开户名" :allow-input="stopNull" class="commonWidthB"
                        v-model:value="formValue.accountName" clearable :disabled="formValue.cardType === '1'" />
                    </NFormItem>
                  </template>
                  <div style="width: 100%">
                    <NButton style="width: 120px; margin-bottom: 10px; margin-left: 120px" type="primary"
                      @click="openScope" ghost>
                      添加报销明细
                    </NButton>
                  </div>
                </NSpace>

                <!-- 剩余的报销明细 -->
                <div style="display: flex" v-for="(item, index) in formValue.reimburseDetailList" :key="index"
                  v-if="formValue.reimburseType != '0'">
                  <div style="display: flex; flex-direction: row; align-items: center">
                    <div style="width: 95%">
                      <NSpace>
                        <div class="titleStyle"></div>
                        <NFormItem :label="`报销明细${index + 1}`" :show-feedback="false" label-style="font-size: 18px;
                  font-weight: 700;
                  height: 34px;
                  font-family: PingFangSC, PingFang SC;
                  line-height: 34px;">
                          <div style="width: 240px"></div>
                        </NFormItem>
                        <NFormItem label="报销内容:" :path="'reimburseDetailList[' + index + '].reimburseContent'" :rule="{
                          required: true,
                          trigger: ['input', 'blur'],
                          validator: (_: any, value: any) => renderContentMessage(_, value)
                        }">
                          <NInput placeholder="请输入" :allow-input="stopNull" class="commonWidthB"
                            v-model:value="item.reimburseContent" clearable />
                        </NFormItem>
                        <NFormItem label="金额(元):" :path="'reimburseDetailList[' + index + '].salary'" :rule="{
                          required: true,
                          trigger: ['blur', 'input'],
                          validator: (_: any, value: any) => renderMoneyMessage(_, value)
                        }">
                          <NInput placeholder="请输入" :allow-input="onlyFloatNumber" class="commonWidthB"
                            v-model:value="item.salary" clearable />
                        </NFormItem>
                        <NFormItem label="单据张数:" :path="'reimburseDetailList[' + index + '].piece'" :rule="{
                          required: true,
                          trigger: ['input', 'blur'],
                          validator: (_: any, value: any) => renderPieceMessage(_, value)
                        }">
                          <NInput placeholder="请输入单据张数" class="commonWidthB" v-model:value="item.piece" clearable
                            :allow-input="onlyIntNumber" />
                        </NFormItem>
                        <NFormItem label="附件:" :path="'reimburseDetailList[' + index + '].fileId'" :rule="{
                          required: true,
                          message: '请上传附件',
                          trigger: ['change', 'blur']
                        }">
                          <VUpload :file-list="item.fileList"
                            @getList="(e) => (formValue.reimburseDetailList[index].fileId = e)" />
                        </NFormItem>
                      </NSpace>
                    </div>
                    <div style="width: 5%; margin-left: 5px">
                      <NButton circle type="error" v-if="formValue.reimburseDetailList.length > 1" size="tiny"
                        @click="deleteUser(index)">
                        <div style="height: 34px; line-height: 34px">—</div>
                      </NButton>
                    </div>
                  </div>
                </div>

                <!-- 差旅报销明细 -->
                <div style="display: flex; flex-wrap: wrap" v-for="(item, index) in formValue.reimburseDetailList"
                  :key="index" v-if="formValue.reimburseType == '0'">
                  <div style="display: flex; flex-direction: row; align-items: center">
                    <div style="width: 95%">
                      <NSpace>
                        <div class="titleStyle"></div>
                        <NFormItem :label="`报销明细${index + 1}`" :show-feedback="false" label-style="font-size: 16px;
                                font-weight: bolder;
                                height: 34px;
                                line-height: 34px;">
                          <div style="width: 240px"></div>
                        </NFormItem>
                      </NSpace>

                      <NFormItem label="起讫日期:">
                        <div style="display: flex; justify-content: space-between; width: 100%">
                          <div style="display: flex; flex-wrap: wrap">
                            <div style="display: flex; justify-content: space-between; width: 100%">
                              <NFormItem :path="`reimburseDetailList[${index}].startTime`" :show-feedback="false" :rule="{
                                required: false,
                                trigger: ['input', 'blur']
                              }">
                                <NDatePicker input-readonly placeholder="开始时间" v-model:formatted-value="item.startTime"
                                  type="date" clearable class="commonWidthA" :is-date-disabled="(ts: any) => {
                                    if (item.endTime) {
                                      return ts > new Date(new Date(item.endTime))
                                    } else {
                                      return false
                                    }
                                  }" />
                              </NFormItem>
                              <div style="height: 34px; line-height: 34px; margin: 0 5px">至</div>
                              <NFormItem :path="`reimburseDetailList[${index}].endTime`" :show-feedback="false" :rule="{
                                required: false,
                                trigger: ['input', 'blur']
                              }">
                                <NDatePicker input-readonly placeholder="结束时间" v-model:formatted-value="item.endTime"
                                  type="date" clearable class="commonWidthA"
                                  :is-date-disabled="(ts: any) => ts < new Date(subDays(new Date(item.startTime), 1))" />
                              </NFormItem>
                            </div>
                          </div>
                        </div>
                      </NFormItem>

                      <NFormItem label="起讫地点:">
                        <div style="display: flex; justify-content: space-between; width: 100%">
                          <NFormItem :path="`reimburseDetailList[${index}].startAddress`" :show-feedback="false" :rule="{
                            required: false,
                            trigger: ['input', 'blur']
                          }">
                            <NInput :allow-input="stopNull" placeholder="出发地" class="commonWidthB"
                              v-model:value="item.startAddress" />
                          </NFormItem>
                          <div style="height: 34px; line-height: 34px; margin: 0 5px">至</div>
                          <NFormItem :path="`reimburseDetailList[${index}].endAddress`" :show-feedback="false" :rule="{
                            required: false,
                            trigger: ['input', 'blur']
                          }">
                            <NInput :allow-input="stopNull" placeholder="目的地" class="commonWidthB"
                              v-model:value="item.endAddress" />
                          </NFormItem>
                        </div>
                      </NFormItem>

                      <NFormItem label="天数：" :path="`reimburseDetailList[${index}].days`" :rule="{
                        required: false,
                        trigger: ['input', 'blur']
                      }">
                        <NInput :allow-input="stopNull" placeholder="天数" class="commonWidth" v-model:value="item.days"
                          :disabled="true" />
                      </NFormItem>

                      <NFormItem label="交通费 " :show-feedback="false" label-style="font-size: 20px;
                      font-weight: boldest;
                      height: 34px;
                      line-height: 34px;" style="margin-left: -10px">
                        <div style="width: 240px"></div>
                      </NFormItem>

                      <NFormItem label="交通工具：" :path="`reimburseDetailList[${index}].vehicles`" :rule="{
                        required: false,
                        trigger: ['input', 'blur']
                      }">
                        <NInput :allow-input="stopNull" placeholder="交通工具" class="commonWidth"
                          v-model:value="item.vehicles" />
                      </NFormItem>

                      <NFormItem label="金额(元)：" :path="`reimburseDetailList[${index}].vehiclesFee`" :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }">
                        <NInput :allow-input="onlyFloatNumber" placeholder="交通费金额" class="commonWidth"
                          v-model:value="item.vehiclesFee" />
                      </NFormItem>

                      <NFormItem label="住宿费" :show-feedback="false" label-style="font-size: 20px;
                      font-weight: boldest;
                      height: 34px;
                      line-height: 34px;" style="margin-left: -10px">
                        <div style="width: 240px"></div>
                      </NFormItem>

                      <NFormItem label="发票金额(元)：" :path="`reimburseDetailList[${index}].invoice`" :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }">
                        <NInput :allow-input="onlyFloatNumber" placeholder="住宿费的发票金额" class="commonWidth"
                          v-model:value="item.invoice" />
                      </NFormItem>

                      <NFormItem label="金额(元)：" :path="`reimburseDetailList[${index}].amount`" :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }">
                        <NInput :allow-input="onlyFloatNumber" placeholder="住宿费金额" class="commonWidth"
                          v-model:value="item.amount" />
                      </NFormItem>

                      <NFormItem label="伙食费" :show-feedback="false" label-style="font-size: 20px;
                      font-weight: boldest;
                      height: 34px;
                      line-height: 34px;" style="margin-left: -10px">
                        <div style="width: 240px"></div>
                      </NFormItem>

                      <NFormItem label="伙食费(元)：" :path="`reimburseDetailList[${index}].boardExpenses`" :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }">
                        <NInput :allow-input="onlyFloatNumber" placeholder="伙食费" class="commonWidth"
                          v-model:value="item.boardExpenses" />
                      </NFormItem>

                      <NFormItem label="杂项" :show-feedback="false" label-style="font-size: 20px;
                      font-weight: boldest;
                      height: 34px;
                      line-height: 34px;" style="margin-left: -10px">
                        <div style="width: 240px"></div>
                      </NFormItem>

                      <NFormItem label="杂费实报金额：" :path="`reimburseDetailList[${index}].sundryFee`" :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }">
                        <NInput :allow-input="onlyFloatNumber" placeholder="杂费实报金额" class="commonWidth"
                          v-model:value="item.sundryFee" />
                      </NFormItem>

                      <NFormItem label="其他" :show-feedback="false" label-style="font-size: 20px;
                      font-weight: boldest;
                      height: 34px;
                      line-height: 34px;" style="margin-left: -10px">
                        <div style="width: 240px"></div>
                      </NFormItem>

                      <NFormItem label="事项：" :path="`reimburseDetailList[${index}].others`" :rule="{
                        required: false,
                        trigger: ['input', 'blur']
                      }">
                        <NInput :allow-input="stopNull" placeholder="事项" class="commonWidth"
                          v-model:value="item.others" />
                      </NFormItem>

                      <NFormItem label="金额(元)：" :path="`reimburseDetailList[${index}].othersFee`" :rule="{
                        required: false,
                        trigger: ['input', 'blur'],
                        validator: (_: any, value: any) => renderMoneyMessageNoMust(_, value)
                      }">
                        <NInput :allow-input="onlyFloatNumber" placeholder="金额" class="commonWidth"
                          v-model:value="item.othersFee" />
                      </NFormItem>

                      <NFormItem label="附件:" :path="'reimburseDetailList[' + index + '].fileId'" :rule="{
                        required: true,
                        message: '请上传附件',
                        trigger: ['change', 'blur']
                      }">
                        <VUpload :file-list="item.fileList"
                          @getList="(e) => (formValue.reimburseDetailList[index].fileId = e)" />
                      </NFormItem>

                      <NFormItem label="合计金额(元):" label-style="font-size: 18px;
                      font-weight: bolder;
                      height: 34px;
                      line-height: 34px;">
                        <div class="valueStyle">{{ item.amountSum }}</div>
                      </NFormItem>
                    </div>
                    <div style="width: 5%; margin-left: 5px">
                      <NButton circle type="error" v-if="formValue.reimburseDetailList.length > 1" size="tiny"
                        @click="deleteUser(index)">
                        <div style="height: 34px; line-height: 34px">—</div>
                      </NButton>
                    </div>
                  </div>
                </div>
              </NForm>
            </div>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <div style="display: flex">
      <NSpace justify="start" style="flex: 0 0 42%">
        <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
          <template #icon>
            <img :src="VBackImg" style="width: 25px; height: 25px" />
          </template>
          返回
        </NButton>
      </NSpace>
      <NSpace justify="center">
        <NButton type="primary" style="background-color: #5faab1" @click="confirm(1)" v-if="workFlowList?.length">
          保存草稿
        </NButton>
        <NButton type="primary" @click="confirm(0)" v-if="workFlowList?.length">
          提交申请
        </NButton>
      </NSpace>
    </div>
  </FixedAction>

  <NModal :auto-focus="false" v-model:show="contentVisible" @close="contentVisible = false">
    <VDialogContent @close="contentVisible = false" @submit="submit" title="保存提示" :loading="loading">
      <div style="width: 300px; height: 100px; text-align: center; line-height: 100px">
        {{ contentContent }}
      </div>
    </VDialogContent>
  </NModal>
</template>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 280px;
}

.commonWidthA {
  width: 130px;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    border-bottom: 1px solid #fff;
    padding: 15px 20px;
    margin-bottom: 20px;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 0 20px 0px;

    .content {
      display: flex;
      flex-wrap: wrap;
      padding: 20px 0 180px;
      background-color: #ebeceb;

      .scope {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .userBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 40px;
          background-color: #fff;
          border-radius: 4px;
          padding: 5px 10px;
          margin-bottom: 10px;
        }
      }
    }
  }
}

.content_cen {
  display: flex;
  flex-direction: column;
  margin-left: 35%;
}

.iconStyle {
  margin-right: 5px;
  color: #5fb17f;
}

.progress {
  display: flex;
  align-items: center;
  min-width: 400px;
  max-width: 800px;
  min-height: 50px;
  background-color: #d5e2d8;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 5px 15px;
  margin-left: 35%;
}

.progressHint {
  display: flex;
  min-width: 400px;
  max-width: 800px;
  padding: 5px 15px;
  margin-left: 35%;
}

.commonWidthB {
  width: 280px;
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}

.labelStyle {
  font-size: 18px;
  font-weight: bolder;
  height: 34px;
  line-height: 34px;
}

.valueStyle {
  width: 280px;
  height: 34px;
  line-height: 34px;
  background-color: #3b333310;
  font-size: 18px;
  font-weight: bolder;
  padding-left: 10px;
}

.titleStyle {
  margin-left: 90px;
  font-size: 16px;
  font-weight: bolder;
}
</style>
